<template>
  <div class="g3d-home-main"></div>
</template>
<script>
import banner from './components/banner.vue';
import about from './components/about.vue';
import product from './components/product.vue';
import ideal from './components/ideal.vue';
import telephone from './components/telephone.vue';
export default {
  components: {
    banner,
    about,
    product,
    ideal,
    telephone
  },
  data() {
    return {
      scroll: '',
      current: 0,

      timer: null,

      list: [
        {
          name: 'about',
          backgroundcolor: '#A593B2'
        },
        {
          name: 'product',
          backgroundcolor: '#A7B293'
        },
        {
          name: 'ideal',
          backgroundcolor: '#0F2798'
        },
        {
          name: 'telephone',
          backgroundcolor: '#0A464D'
        }
      ],
      navList: [1, 2, 3, 4, 5]
    };
  },
  methods: {
    dataScroll: function() {
      this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
    },
    jump(index) {
      this.current = index;
      let jump = document.getElementsByClassName('section');
      // console.log(jump)
      // 获取需要滚动的距离-50
      let total = jump[index].offsetTop;
      // Chrome
      document.body.scrollTop = total;
      // Firefox
      document.documentElement.scrollTop = total;
      // Safari
      window.pageYOffset = total;
      if (document.documentElement.scrollTop > 0) {
        var c = setTimeout(() => this.toTop(i), 16);
      } else {
        clearTimeout(c);
      }
    },

    // 监听的事件

    // 点击回到顶部的事件
    backTop() {
      // 重新点击回到顶部。清除之前的定时器
      if (this.timer != null) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        this.scrollToTopTimer();
      }, 20);
    },
    // 平缓滚动的事件
    scrollToTopTimer() {
      let scrollTop = this.scroll;
      // console.log(this.scroll)
      if (scrollTop > 0) {
        scrollTop -= 100;
        if (scrollTop <= 0) {
          scrollTop = 0;
          clearInterval(this.timer);
        }
      }
      document.body.scrollTop = scrollTop;
      // Firefox
      document.documentElement.scrollTop = scrollTop;
      // Safari
      window.pageYOffset = scrollTop;
    },

    loadSroll: function() {
      var self = this;
      var $navs = document.getElementsByClassName('nav1');

      var sections = document.getElementsByClassName('section');
      for (var i = sections.length - 1; i >= 0; i--) {
        if (self.scroll >= sections[i].offsetTop - 100) {
          // console.log(i)
          self.current = i;
          // $navs.eq(i).addClass("current").siblings().removeClass("current")
          break;
        }
      }
    }
  },
  watch: {
    scroll: function() {
      this.loadSroll();
    }
  },
  mounted() {
    window.addEventListener('scroll', this.dataScroll);
  }
};
</script>

<style scoped lang="less">
.g3d-home-main {
}
</style>
